<template>
  <a-card title="组长标记统计">
    <a-tabs v-model="type" @change="onTabs">
      <a-tab-pane key="today" tab="本日"></a-tab-pane>
      <a-tab-pane key="month" tab="当月"></a-tab-pane>
    </a-tabs>
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline">
        <a-row :gutter="20">
          <a-col :md="6" :sm="24">
            <a-form-model-item label="日期选择">
              <a-date-picker style="width:300px" v-model="time" @change="onChange"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <s-table
      bordered
      :row-key="(record,index) => index"
      ref="table"
      :columns="lColumns"
      :data="lData"
    >
      <template slot="title">
        <div :style="{ overflow: 'hidden' }">
          <div :style="{ float: 'left' }">
            标记总优秀数：<a-tag color="blue">{{yx_sum_cum}}</a-tag>个，总异常数 <a-tag color='red'>{{wt_sum_cum}}</a-tag>个，已读 <a-tag color='purple'>{{yd_sum_cum}}</a-tag>个
          </div>
        </div>
      </template>
      <template slot="wt_num" slot-scope="text">
        <a-tag color='red'>{{text}}</a-tag>
      </template>
      <template slot="yx_num" slot-scope="text">
        <a-tag color="blue">{{text}}</a-tag>
      </template>
      <template slot='yd_num' slot-scope='text'>
        <a-tag color='purple'>{{text}}</a-tag>
      </template>
    </s-table>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/calls'
import { getState1 } from '@/api/calls'
export default {
  components: {
    STable
  },
  name: 'CallState',
  data () {
    return {
      lColumns: col.state1,
      lData: parameters => {
        return getState1(Object.assign(parameters, this.queryParam)).then(res => {
          this.yx_sum_cum = res.result.yx_sum_cum
          this.wt_sum_cum = res.result.wt_sum_cum
          this.yd_sum_cum = res.result.yd_sum_cum
          return res.result
        })
      },
      yx_sum_cum: '',
      wt_sum_cum: '',
      yd_sum_cum: '',
      queryParam: {},
      type: 'today',
      time: ''
    }
  },
  created () {
    this.queryParam['type'] = this.type
  },
  methods: {
    onChange (date, dateString) {
      const app = this
      app.time = dateString
      app.type = ''
      app.queryParam['type'] = app.time
      app.$refs.table.refresh(true)
    },
    onTabs (key) {
      const app = this
      app.time = ''
      app.queryParam['type'] = key
      app.$refs.table.refresh(true)
    }
  }
}
</script>

<style scoped>

</style>
